<template>
  <el-drawer
    :title="
      drawer.type === 'edit'
        ? '编辑成员'
        : drawer.type === 'new'
        ? '新增成员'
        : '成员详情'
    "
    :visible.sync="drawer.show"
    custom-class="add-drawer"
    ref="drawer"
    size="40%"
  >
    <div class="demo-drawer__content">
      <el-form
        v-if="memberData"
        :model="memberData"
        :rules="teamDataRules"
        ref="memberDataFormRef"
        style="padding: 0rem 2rem"
        label-position="left"
        label-width="100px"
      >
        <el-form-item prop="salesmanId" label="业务人员">
          <el-select
            v-model="memberData.salesmanId"
            placeholder="请选择业务人员"
            filterable
            size="small"
            style="width: 100%"
            :disabled="drawer.type === 'view'"
            @change="memberChange"
          >
            <el-option
              v-for="item in settingData.memberList"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            <span style="float: left">{{ item.nickName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userId }}</span>
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="enterpriseIds" label="油企选择">
          <el-select
            v-model="memberData.enterpriseIds"
            placeholder="请选择油企"
            size="small"
            filterable
            clearable
            multiple
            :disabled="drawer.type === 'view'"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in settingData.enterpriseList"
              :key="index"
              :label="item.enterpriseName"
              :value="item.enterpriseId"
            >
            <span style="float: left">{{ item.enterpriseName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.enterpriseId }}</span>
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: end">
          <div class="demo-drawer__footer">
            <el-button @click="handleClone">取消</el-button>
            <el-button
              v-if="drawer.type === 'edit'"
              type="primary"
              @click="handleSubmitEdit"
              >提交</el-button
            >
            <el-button
              v-if="drawer.type === 'new'"
              type="primary"
              @click="handleSubmitAdd"
              >提交</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>
<script>
import { addMember, updateMember } from "@/api/member-management";
import { cloneDeep } from "lodash";

export default {
  props: {
    parm: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      drawer: {
        show: this.parm ? this.parm.drawerShow : false,
        type: this.parm ? this.parm.drawerType : "read", // edit || view || new
      },
      memberData: this.parm ? this.parm.memberData : {},
      settingData: this.parm ? this.parm.settingData : {},
      teamDataRules: {
        enterpriseIds: [
          { required: true, message: "请选择油企", trigger: "change" },
        ],
        salesmanId: [
          { required: true, message: "请选择业务人员", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    memberChange(val) {
      this.$forceUpdate();
    },
    // 新增
    handleSubmitAdd() {
      let memberData = cloneDeep(this.memberData);
      console.log(memberData);
      this.$confirm(`确认新增成员吗？`).then(() => {
        addMember(memberData).then((res) => {
          console.log(res);
          if (res && res.code === 200) {
            this.$message.success(res.msg);
            this.drawer.show = false;
            this.$emit("getData");
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    //  编辑
    handleSubmitEdit() {
      let memberData = cloneDeep(this.memberData);
      memberData = Object.assign(
        {},
        {
          enterpriseIds: memberData.enterpriseIds,
          salesmanId: memberData.salesmanId,
          id: memberData.id,
        }
      );
      this.$confirm(`确认保存修改后的成员信息吗？`).then(() => {
        updateMember(memberData).then((res) => {
          console.log(res);
          if (res && res.code === 200) {
            this.$message.success(res.msg);
            this.drawer.show = false;
            this.$emit("getData");
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    handleClone() {
      this.drawer.show = false;
    },
  },
  watch: {
    parm(newValue) {
      console.log(newValue);
      this.drawer.show = newValue.drawerShow;
      this.drawer.type = newValue.drawerType;
      this.memberData = newValue.memberData;
      this.settingData = newValue.settingData;
      this.$nextTick(() => {
        this.$refs.memberDataFormRef.clearValidate();
      });
    },
  },
};
</script>
<style scoped></style>
